<!--
 * @Description: 地图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: 陈鑫茹 2182688619@qq.com
 * @LastEditTime: 2025-09-26 15:52:12
-->
<template>
    <div>
        <!-- 提供地图容器  -->
        <div ref="map" style="height:400px;"></div>
    </div>
</template>

<script>
// 引入get请求 
import { get } from '@/utils/request'
// 引入vuex中辅助函数  
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            // 存放所有设备信息 
            deviceData: []
        };
    },
    computed: {},
    methods: {
        //  ...mapMutations(['SET_ED']),
        // 封装加载地图函数 
        loadMap() {
            AMapLoader.load({
                key: "6fcb059cef29ef8a308a9e364730fe9d", //申请好的Web端开发者 Key，调用 load 时必填
                version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
            })
                .then((AMap) => {
                  
                    // 创建地图图层
                    const map = new AMap.Map(this.$refs.map, {
                        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
                        viewMode: '3D', //地图模式
                        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
                        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
                        zoom: 17, //初始化地图层级
                        rotation: -15, //初始地图顺时针旋转的角度
                        zooms: [2, 20], //地图显示的缩放级别范围
                        center: [116.397428, 39.90923], //初始地图中心经纬度
                        terrain: true //开启地形图
                        // mapStyle: "amap://styles/normal", //设置地图的显示样式
                    });
                    const traffic = new AMap.TileLayer.Traffic({
                        autoRefresh: true, //是否自动刷新，默认为false
                        interval: 180, //刷新间隔，默认180s
                    });
                    map.add(traffic); //通过add方法添加图层
                })
                .catch((e) => {
                    console.error(e); //加载错误提示
                });
        },
        // 封装获取工程设备树
        async getEngData() {
            let res = await get('/dashboard/findEngineerDeviceTree');
            // console.log(res, '工程设备树');
            // 将所有设备信息全部存放在数组中 
            let temp = [];
            res.data.forEach(item => {
                if (item.children.length > 0) {
                    item.children.forEach(it => {
                        temp.push(it);
                    })
                }
            });
            console.log(temp);
            this.deviceData = temp;
        }

    },
    created() { },
    async mounted() {
        await this.getEngData();
        this.loadMap();
    }
};
</script>
<style scoped>
.Map {
    width: 475px;
    /* 设置宽度 */
    height: 400px;
    /* 边框，方便查看容器范围 */
    box-sizing: border-box;
    /* 确保padding和border不影响最终尺寸 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-top: 30px;
}
</style>